{% extends 'base.html' %}
{% load static %}

{% block title %}申请借用资产{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-plus me-2"></i>申请借用资产</h5>
                </div>
                
                <div class="card-body">
                    <form method="post" id="borrowRequestForm">
                        {% csrf_token %}
                        
                        <div class="row">
                            <!-- 资产选择 -->
                            <div class="col-md-6">
                                <h6 class="mb-3"><i class="fas fa-laptop me-2"></i>资产信息</h6>
                                
                                <div class="mb-3">
                                    <label for="asset" class="form-label">选择资产 <span class="text-danger">*</span></label>
                                    <select class="form-select" id="asset" name="asset" required>
                                        <option value="">请选择要借用的资产</option>
                                        {% for asset in assets %}
                                            <option value="{{ asset.id }}" 
                                                    data-category="{{ asset.category.name }}"
                                                    data-department="{{ asset.department.name|default:'未分配' }}"
                                                    data-status="{{ asset.get_status_display }}"
                                                    data-user="{% if asset.user %}{{ asset.user.get_full_name|default:asset.user.username }}{% else %}未分配{% endif %}">
                                                {{ asset.name }} ({{ asset.asset_number }})
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                
                                <!-- 资产详情显示 -->
                                <div id="assetDetails" class="card d-none">
                                    <div class="card-body">
                                        <h6 class="card-title">资产详情</h6>
                                        <table class="table table-borderless table-sm">
                                            <tr>
                                                <td width="80"><strong>类别：</strong></td>
                                                <td id="assetCategory">-</td>
                                            </tr>
                                            <tr>
                                                <td><strong>部门：</strong></td>
                                                <td id="assetDepartment">-</td>
                                            </tr>
                                            <tr>
                                                <td><strong>状态：</strong></td>
                                                <td id="assetStatus">-</td>
                                            </tr>
                                            <tr>
                                                <td><strong>使用人：</strong></td>
                                                <td id="assetUser">-</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 借用信息 -->
                            <div class="col-md-6">
                                <h6 class="mb-3"><i class="fas fa-info-circle me-2"></i>借用信息</h6>
                                
                                <div class="mb-3">
                                    <label for="purpose" class="form-label">借用目的 <span class="text-danger">*</span></label>
                                    <select class="form-select" id="purpose" name="purpose" required>
                                        <option value="">请选择借用目的</option>
                                        {% for value, label in purpose_choices %}
                                            <option value="{{ value }}">{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="purpose_description" class="form-label">详细说明 <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="purpose_description" name="purpose_description" 
                                              rows="3" required placeholder="请详细说明借用原因和用途..."></textarea>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="expected_return_date" class="form-label">预计归还时间 <span class="text-danger">*</span></label>
                                    <input type="datetime-local" class="form-control" id="expected_return_date" 
                                           name="expected_return_date" required>
                                </div>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <!-- 联系信息 -->
                        <div class="row">
                            <div class="col-12">
                                <h6 class="mb-3"><i class="fas fa-address-book me-2"></i>联系信息</h6>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="contact_phone" class="form-label">联系电话</label>
                                    <input type="tel" class="form-control" id="contact_phone" name="contact_phone" 
                                           placeholder="请输入联系电话">
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="contact_email" class="form-label">联系邮箱</label>
                                    <input type="email" class="form-control" id="contact_email" name="contact_email" 
                                           placeholder="请输入联系邮箱">
                                </div>
                            </div>
                        </div>
                        
                        <!-- 注意事项 -->
                        <div class="alert alert-info">
                            <h6><i class="fas fa-info-circle me-2"></i>借用须知</h6>
                            <ul class="mb-0">
                                <li>请确保借用目的真实有效，并按时归还资产</li>
                                <li>借用期间请妥善保管资产，如有损坏需承担相应责任</li>
                                <li>如需延期归还，请提前联系管理员申请</li>
                                <li>归还时请确保资产完好，并配合验收</li>
                            </ul>
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'assets:borrow_request_list' %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>返回列表
                            </a>
                            <div>
                                <button type="button" class="btn btn-outline-primary me-2" onclick="history.back()">
                                    <i class="fas fa-times me-1"></i>取消
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-paper-plane me-1"></i>提交申请
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const assetSelect = document.getElementById('asset');
    const assetDetails = document.getElementById('assetDetails');
    const expectedReturnDate = document.getElementById('expected_return_date');
    
    // 设置默认归还时间（7天后）
    const nextWeek = new Date();
    nextWeek.setDate(nextWeek.getDate() + 7);
    expectedReturnDate.value = nextWeek.toISOString().slice(0, 16);
    
    // 资产选择变化时显示详情
    assetSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        
        if (selectedOption.value) {
            document.getElementById('assetCategory').textContent = selectedOption.dataset.category || '-';
            document.getElementById('assetDepartment').textContent = selectedOption.dataset.department || '-';
            document.getElementById('assetStatus').textContent = selectedOption.dataset.status || '-';
            document.getElementById('assetUser').textContent = selectedOption.dataset.user || '-';
            
            assetDetails.classList.remove('d-none');
        } else {
            assetDetails.classList.add('d-none');
        }
    });
    
    // 表单提交验证
    document.getElementById('borrowRequestForm').addEventListener('submit', function(e) {
        const returnDate = new Date(expectedReturnDate.value);
        const now = new Date();
        
        // 检查归还时间是否合理
        if (returnDate <= now) {
            e.preventDefault();
            alert('预计归还时间必须晚于当前时间');
            expectedReturnDate.focus();
            return false;
        }
        
        // 检查借用时长是否过长（超过30天提醒）
        const daysDiff = (returnDate - now) / (1000 * 60 * 60 * 24);
        if (daysDiff > 30) {
            if (!confirm('借用时长超过30天，确定要提交申请吗？')) {
                e.preventDefault();
                return false;
            }
        }
        
        // 确认提交
        if (!confirm('确定要提交借用申请吗？')) {
            e.preventDefault();
            return false;
        }
    });
    
    // 目的选择变化时的处理
    document.getElementById('purpose').addEventListener('change', function() {
        const purposeDescription = document.getElementById('purpose_description');
        const selectedText = this.options[this.selectedIndex].text;
        
        if (this.value && !purposeDescription.value) {
            purposeDescription.placeholder = `请详细说明${selectedText}的具体情况...`;
        }
    });
});
</script>
{% endblock %}
